<template>
<div class="header">
  <div>XXX商城管理平台</div>
  <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    <div>欢迎{{roles}}：{{name}}</div>
  </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item disabled>个人中心</el-dropdown-item>
      <el-dropdown-item disabled>设置</el-dropdown-item>
      <el-dropdown-item command="out">退出</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>

</div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  name: "AdminHeader",
  data(){
    return {
      name:"",
      roles:""

    }
  },
  methods:{
    handleCommand(command) {
      if (command === "out"){
        //删除cookis 和sessionStorage
        Cookies.remove("username")
        Cookies.remove("token")
        Cookies.remove("roles")
        this.$message({
          type:"warning",
          message:"注销成功"
        })
        setTimeout(()=>{
          this.$router.push({name:"login"})
        },1000)
      }
    }
  },
  created() {
    this.roles = Cookies.get("roles")
    this.name = Cookies.get("username")

  },
}
</script>

<style scoped lang="less">

*{
  padding: 0;
  margin: 0;
}

.header{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}


</style>